import React, { Component } from 'react'
import { NavBar } from 'antd-mobile'
import SearchInput from "../searchInput/SearchInput"
import "./category.scss"
import myaxios from "../../utils/myaxios"

export default class Category extends Component {
    state = {
        categories: [],
        categories_contont: [], //右边渲染的内容
        select_index: 0 //当前选中左边的菜单
    }

    handleItemClick = (e) => {
        // console.log(e.target.getAttribute("data-index"))
        let select_index = e.target.getAttribute("data-index")
        this.setState({
            select_index: parseInt(select_index),
            categories_content: this.state.categories[select_index].children
        })
        console.log(this.state.select_index)
        console.log(this.state.categories_content)
    }
    handleProductItemClick = (e) => {
        let cid = e.target.getAttribute("data-index");
        console.log(cid)
        this.props.history.push("/goodList/" + cid);
    };


    componentDidMount() {
        myaxios.get("categories").then(res => {
            console.log(res)
            this.setState({
                categories: res,
                categories_contont: res[0].children
            })
        }).catch(err => {
            console.log(err)
        })
    }

    render() {
        return (
            <div className="shop-category">
                <div className="index-nav">
                    <NavBar className="index-nav-title">商城分类</NavBar>
                </div>
                <div className="index-search">
                    <SearchInput></SearchInput>
                </div>
                <div className="category-content">
                    <div className="content-left" onClick={this.handleItemClick}>
                        {
                            this.state.categories.map((v, index) => {
                                return <div data-index={index}
                                    className={this.state.select_index === index ? "active content_left_item" : "content_left_item"}
                                    key={v.cat_id}>
                                    {v.cat_name}
                                </div>
                            })
                        }
                    </div>
                    <div className="content-right">
                        {
                            this.state.categories_contont.map((v, i) => {
                                return <div className="categories_right_item" key={v.cat_id}>
                                    <div className="right_item_title">
                                        {"/"}
                                        {v.cat_name}
                                        {"/"}
                                    </div>
                                    <div className="product_list"
                                        onClick={this.handleProductItemClick}>
                                        {v.children && v.children.map((v) => {
                                            return <div className="product_list_item" key={v.cat_id}
                                                data-index={v.cat_id}>
                                                <div className="imgs_box">
                                                    <img src={v.cat_icon} alt=""
                                                        data-index={v.cat_id} />
                                                </div>
                                                <div className="item_title">
                                                    {v.cat_name}
                                                </div>
                                            </div>
                                        })}
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}
